import React, { useRef } from 'react'
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import { Button, Tag, Space, Menu, Dropdown , Image } from 'antd';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import request from 'umi-request'
const invoiceTable = (props) =>{
    const columns = [
        {
            title:"序号",
            dataIndex: 'id',
            width: 48,
            hideInSearch:true,
            align:'center',
            width:'100'
        },
        {
            title: '发票号码',
            dataIndex: 'invoiceNum',
            copyable: true,
            align:'center',
            width:'100'
        },
        {  
            title:'发票金额',
            dataIndex:'invoicePrice',
            hideInSearch:true,
            align:'center',
            width:'100'
        },
        {
            title: '状态',
            dataIndex: 'status',
            filters: true,
            onFilter: true,
            valueType: 'select',
            valueEnum: {
                all: { text: '全部', status: 'Default' },
                no: {
                    text: '未签字',
                    status: 'Error',
                },
                yes: {
                    text: '已签字',
                    status: 'Success',
                },
            },
            hideInSearch:true,
            align:'center',
            width:'100'
        },
        {  
            title:'开票公司',
            dataIndex:'openInvoiceCom',
            hideInSearch:true,
            align:'center',
            width:'100'
        },
        {
            title:'受票单位',
            dataIndex:'invoiceCom',
            hideInSearch:true,
            align:'center',
            width:'100'
        },
        {
            title:'签名',
            dataIndex:'signatureImg',
            hideInSearch:true,
            render: (_, recode) => {
                const node = recode.signatureImg === null ? <div>-</div> : <Image width={50} src={ recode.signatureImg} />
                return (
                    node
                )
            },
            align:'center',
            width:'100'
        },
        {
            title:'回执',
            dataIndex:'reciptImg',
            hideInSearch:true,
            render: (_, recode) => {
                const node = recode.reciptImg === null ? <div>-</div> : <Image width={50} src={ recode.reciptImg} />
                return (
                    node
                )
            },
            align:'center',
            width:'100'
        },
        {
            title:'开票日期',
            dataIndex:'startDate',
            hideInSearch:true,
            align:'center',
            width:'100'
        },
        {
            title:'签收日期',
            dataIndex:'endDate',
            hideInSearch:true,
            align:'center',
            width:'100'
        }
        
    ];
    const handleRequest = async (params = {}, sort, filter) =>{
        const res = await request('/invoice/gettable/', {
            params,
        });
        return res
    }
    return(
        <ProTable 
        columns={columns}
        request={handleRequest} 
        rowKey="id" 
        search={{
            labelWidth: 'auto',
        }} 
        pagination={{
            pageSize: 10,
        }} 
        />
    )
}
export default invoiceTable